<template>
  <div class="emotionWrapper" :style="computedPos">
    <div class="content">
      <div class="title">全部表情</div>
      <div class="contentList">
        <div
          v-for="(emotion, index) in EmotionList"
          :key="emotion"
          class="emotionContainer"
          :title="emotion"
          @click="selectEmotion(emotion)"
        >
          <EmotionItem :emotion="emotion" :index="index" />
        </div>
      </div>
      <div class="emotionTool"></div>
    </div>
    <div class="jb"></div>
  </div>
</template>
<script lang="ts" setup>
import { watch, computed, ref } from 'vue'
import { useWindowSize } from '@/hooks/useWindows'
import EmotionItem from '../emotion/EmotionItem.vue'
// const EmotionList = ref([])
import EmotionList from '@/assets/images/emotion/index.ts'
const props = defineProps({
  fixPos: {
    type: Object,
    default: ()=> ({top: 0, left: 0})
  }
})
const computedPos = computed(()=> ({left: `${props.fixPos.left}px`, top: `${props.fixPos.top}px`, }))
const emit = defineEmits(['selectEmotion'])
// 选中表情
const selectEmotion = (emotion: any) => {
  emit('selectEmotion', emotion)
}
</script>
<style lang="less" scoped>
.emotionWrapper {
  position: absolute;
  width: 500px;
  z-index: 151;
  filter: drop-shadow(2px 2px 10px #ccc);
  .content {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    padding-bottom: 20px;
    .title {
      font-size: 15px;
      color: #919191;
      margin-bottom: 10px;
    }
    .contentList {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      .emotionContainer {
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        &:hover {
          background-color: #e5e5e5;
        }
      }
    }
  }
  .jb {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px 8px;
    border-color: white transparent transparent transparent;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>
